<template>
    <div>
        <el-button type="primary" @click="openDialog">业务查询</el-button>

        <el-dialog :visible.sync="dialogVisible" title="业务查询" width="80%">
            <el-form :model="form" ref="form" label-width="120px" v-if="showinput">

                <el-form-item label="业务名称">
                    <el-input v-model="form.business_name"></el-input>
                </el-form-item>
                <el-form-item label="装机地址">
                    <el-input v-model="form.install_address"></el-input>
                </el-form-item>
                <el-form-item label="运营商工单编号">
                    <el-input v-model="form.order_number"></el-input>
                </el-form-item>
                <el-form-item label="运营商工单类型">
                    <el-input v-model="form.order_type"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSearch">确认</el-button>
            </span>
            <el-table :data="searchResults" v-if="showResults" @row-dblclick="onRowDblClick">

                <el-table-column prop="business_name" label="业务名称" />
                <el-table-column prop="install_address" label="装机地址" />
                <el-table-column prop="order_number" label="运营商工商编号" />
                <el-table-column prop="order_type" label="运营商工商类型" />
            </el-table>

            <el-table :data="searchResults1" v-if="showone" @row-dblclick="onRowDblClick1">

                <el-table-column prop="name" label="客户名称" />
                <el-table-column prop="address" label="地址" />
                <el-table-column prop="region" label="客户归属地" />
                <el-table-column prop="phone1" label="客户手机号" />
            </el-table>
            <el-form :model="customerForm[0]" ref="customerForm" label-width="120px" v-if="showone1">

                <el-form-item label="客户名称" prop="name">
                    <el-input v-model="customerForm[0].name" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户地址" prop="address">
                    <el-input v-model="customerForm[0].address" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户归属地" prop="region">
                    <el-input v-model="customerForm[0].region" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户联系人" prop="contactPerson">
                    <el-input v-model="customerForm[0].contact_person" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户电话" prop="phone">
                    <el-input v-model="customerForm[0].phone1" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户经理">
                    <el-input v-model="customerForm[0].manager" disabled></el-input>
                </el-form-item>
                <el-form-item label="客户经理电话" prop="manager_phone">
                    <el-input v-model="customerForm[0].manager_phone" disabled></el-input>
                </el-form-item>

            </el-form>
            <el-button type="primary" @click="exportToExcel" v-if="showone1">导出为Excel</el-button>
        </el-dialog>



        


    </div>
</template>

<script>
import axios from 'axios';
import * as XLSX from 'xlsx';

export default {
    data() {
        return {
            dialogVisible: false,
            customerDialogVisible: false,
            showone: false,
            showinput: false,
            form: {

                business_name: '',
                install_address: '',
                order_number: '',
                order_type: '',
                business_status: '',
                order_receive_date: '',
                business_number: '',
                order_status: '',
                data_status: ''
            },
            searchResults1: [],
            searchResults: [],
            showResults: false,
            customerForm: [{
                name: '',
                address: '',
                contact_person: '',
                phone1: '',
                region: '',
                operator: '',
                manager: '',
                manager_phone: '',
                business_mgr: '',
                status: ''
            },],
            showone1: false,
            customerBusinesses: [],
            showCustomerBusinesses: false
        };
    },
    methods: {
        openDialog() {
            this.dialogVisible = true;
            this.showinput = true;
            this.resetForm();
        },
        async onSearch() {
            try {

                const response = await axios.post('/api/business/search', this.form, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                this.searchResults = response.data.data;
                if (this.searchResults.length === 0) {
                    this.$message.warning('没有符合条件的记录');
                } else {
                    this.showResults = true;
                }
            } catch (error) {
                this.$message.error('查询失败');
            }
        },
        async onRowDblClick(row) {
            try {

                const res = await axios.post('/api/business/searchByBusName', { ...row }.business_name, {
                    headers: {
                        'Content-Type': 'text/plain'
                    }
                })

                this.searchResults1 = res.data.data;
                console.log(this.searchResults1)
                this.showCustomerBusinesses = true;
                this.customerDialogVisible = true;
            } catch (error) {
                this.$message.error('获取客户信息失败');
            }
            this.showone = true;
        },
        exportToExcel() {
            const data = this.customerForm.map(customerForm => ({
                '客户名称': customerForm.name,
                '客户地址': customerForm.address,
                '客户归属地': customerForm.region,
                '客户联系人': customerForm.contact_person,
                '客户电话': customerForm.phone1,
                '客户经理': customerForm.manager,
                '客户经理电话':customerForm.manager_phone
            }));
            const ws = XLSX.utils.json_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, '业务查询结果');
            XLSX.writeFile(wb, '业务查询结果.xlsx');
        },
        resetForm() {
            this.form = {
                business_name: '',
                install_address: '',
                order_number: '',
                order_type: '',
                business_status: '',
                order_receive_date: '',
                business_number: '',
                order_status: '',
                data_status: ''
            };
            this.searchResults = [];
            this.showResults = false;
            this.showone = false;
            this.showone1 = false;
            this.customerForm = []
        },
        onRowDblClick1(row) {
            this.customerForm = [{ ...row }];
            this.showResults = false;
            this.showone = false;
            this.showinput = false;
            this.showone1 = true;
            
        }
    }
};
</script>

<style scoped>
.dialog-footer {
    text-align: right;
}
</style>